<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
#parse("sys/header.html")
<link type="text/css" rel="stylesheet" href="${rc.contextPath}/statics/plugins/fileinput/css/fileinput.css" />
<script type="text/javascript" src="${rc.contextPath}/statics/plugins/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="${rc.contextPath}/statics/plugins/fileinput/js/locales/zh.js"></script>
</head>
<body>

<div id="rrapp">
	<div class="container kv-main">
		<form enctype="multipart/form-data" action='../sysfileupload/imageUpload'>
	        <input id="file-0a" class="file-loading" type="file" name="imageFile" ><!-- multiple data-min-file-count="1" -->
	        <br>
	        <input type="text" class="form-control" name="dirName" value="text">
	        <br>
	        <button type="submit" class="btn btn-primary">Submit</button>
	        <button type="reset" class="btn btn-default">Reset</button>
	    </form>
	    <br>
	    <div class="form-group">
            <input id="file-5" class="file" type="file" name="imageFile" multiple data-preview-file-type="any" data-upload-url="../sysfileupload/imageUpload?dirName=text">
        </div>
	    <br>
		<input type="file" name="imageFile" class="layui-upload-file">&nbsp;图片地址：<a target="_blank" v-bind:href="file">{{ file }}</a>
	</div>
</div>

<script>
$(document).on('ready', function() {
	$("#file-0a").fileinput({
		language: 'zh'//设置语言
		,showUpload: true //是否显示上传按钮
        ,showCaption: true //是否显示标题
        ,dropZoneEnabled: false //是否显示拖拽区域
		,uploadUrl: '../sysfileupload/imageUpload'//上传的地址
		,maxFileSize: 1000
		,maxFileCount:1 //表示允许同时上传的最大文件个数
		//,allowedFileTypes: ['image', 'video', 'flash']//文件类型
		,uploadExtraData:{"dirName":'text'}
		,allowedFileExtensions: ['jpg', 'gif', 'png']//接收的文件后缀
		,slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
	});
	$("#file-0a").on("fileuploaded", function (event, data, previewId, index) {
		console.log(data);
	})
	$('#file-0a').on('fileerror', function(event, data, msg) {
		console.log(data);
	});
});
	
var vm = new Vue({
	el:'#rrapp',
	data:{
		file:null
	},
	created: function() {
		layui.use('upload', function(){
		  layui.upload({
		    url: '../util/fileUpload/imageUpload?dirName=text' //上传接口
		    ,method: 'post' //上传接口的http类型
		    ,success: function(res){ //上传成功后的回调
		      console.log(res)
		      if(res.code==0){
		          layer.msg('上传成功!');
		          vm.file = res.imgPath;
		      }
		    }
		  });
		});
    },
	methods: {
	}
});


</script>
</body>
</html>